<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="卷宗号" prop="dossierCode">
				<el-input v-model="queryParams.dossierCode" placeholder="请输入卷宗号" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="卷宗题名" prop="dossierName">
				<el-input v-model="queryParams.dossierName" placeholder="请输入卷宗题名" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="案卷档号" prop="dossierNumber">
				<el-input v-model="queryParams.dossierNumber" placeholder="请输入案卷档号" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="保管年限" prop="saveYear">
				<el-input v-model="queryParams.saveYear" placeholder="请输入保管年限" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
				<el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="Plus" @click="handleAdd"
					v-hasPermi="['base:dossier:add']">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
					v-hasPermi="['base:dossier:edit']">修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
					v-hasPermi="['base:dossier:remove']">删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="info" plain icon="Upload" @click="handleImport">导入</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="Download" @click="handleExport"
					v-hasPermi="['base:dossier:export']">导出</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="dossierList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="分类名称" align="center" prop="catalog.catalogName" />
			<el-table-column label="全宗号" align="center" prop="family.familyName" min-width="210px" />
			<el-table-column label="卷宗号" align="center" prop="dossierCode" />
			<el-table-column label="卷宗题名" align="center" prop="dossierName" min-width="100px" />
			<el-table-column label="卷宗档号" align="center" prop="dossierNumber" />
			<el-table-column label="保管年限" align="center" prop="saveYear" />
			<el-table-column label="密级" align="center" prop="secretLevel">
				<template #default="scope">
					<dict-tag :options="secret_level" :value="scope.row.secretLevel" />
				</template>
			</el-table-column>
			<el-table-column label="年度" align="center" prop=" year" />
			<el-table-column label="卷宗顺序号" align="center" prop="dossierNo" min-width="90px" />
			<el-table-column label="卷内文件数" align="center" prop="fileNumDossier" min-width="90px" />
			<el-table-column label="卷内文件页数" align="center" prop="pageNumDossier" min-width="110px" />
			<el-table-column label="起始日期" align="center" prop="startDate" width="180">
				<template #default="scope">
					<span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="结束日期" align="center" prop="endDate" width="180">
				<template #default="scope">
					<span>{{ parseTime(scope.row.endDate, '{y}-{m}-{d}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="责任者" align="center" prop="duty" min-width="210px" />
			<el-table-column label="机构或问题" align="center" prop="matter" min-width="90px" />
			<el-table-column label="操作" width="155" align="center" class-name="small-padding fixed-width" fixed="right">
				<template #default="scope">
					<el-button type="text" icon="Edit" @click="handleUpdate(scope.row)"
						v-hasPermi="['base:dossier:edit']">修改</el-button>
					<el-button type="text" icon="Delete" @click="handleDelete(scope.row)"
						v-hasPermi="['base:dossier:remove']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize" @pagination="getList" />

		<!-- 添加或修改卷宗管理对话框 -->
		<el-dialog :title="title" v-model="open" width="900px" append-to-body>
			<el-form ref="dossierRef" :model="form" :rules="rules" label-width="100px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="全宗号" prop="familyId">
							<el-select v-model="form.familyId" placeholder="请选择全宗号">
								<el-option v-for="item in familyOptions" :key="item.familyId" :label="item.familyName"
									:value="item.familyId"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="分类名称" prop="catalogId">
							<el-tree-select v-model="form.catalogId" :data="catalogOptions"
								:props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
								placeholder="请选择分类名称" check-strictly />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="卷宗号" prop="dossierCode">
							<el-input v-model="form.dossierCode" placeholder="请输入卷宗号" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="卷宗题名" prop="dossierName">
							<el-input v-model="form.dossierName" placeholder="请输入卷宗题名" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="卷宗档号" prop="dossierNumber">
							<el-input v-model="form.dossierNumber" placeholder="请输入卷宗档号" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="保管年限" prop="saveYear">
							<el-input v-model="form.saveYear" placeholder="请输入保管年限" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="密级" prop="secretLevel">
							<el-select v-model="form.secretLevel" placeholder="请选择密密级">
								<el-option v-for="dict in secret_level" :key="dict.value" :label="dict.label"
									:value="parseInt(dict.value)"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="年度" prop=" year">
							<el-input v-model="form.year" placeholder="请输入年度" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="卷宗顺序号" prop="dossierNo">
							<el-input v-model="form.dossierNo" placeholder="请输入卷宗顺序号" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="卷内文件数" prop="fileNumDossier">
							<el-input v-model="form.fileNumDossier" placeholder="请输入卷内文件数" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="卷内文件页数" prop="pageNumDossier">
							<el-input v-model="form.pageNumDossier" placeholder="请输入卷内文件页数" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="起始日期" prop="startDate">
							<el-date-picker clearable v-model="form.startDate" type="date" value-format="YYYY-MM-DD"
								placeholder="请选择起始日期">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="结束日期" prop="endDate">
							<el-date-picker clearable v-model="form.endDate" type="date" value-format="YYYY-MM-DD"
								placeholder="请选择结束日期">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="责任者" prop="duty">
							<el-input v-model="form.duty" placeholder="请输入责任者" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="机构或问题" prop="matter">
							<el-input v-model="form.matter" placeholder="请输入机构或问题" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</template>
		</el-dialog>

		<!-- 卷宗导入对话框 -->
		<el-dialog v-loading.fullscreen.lock="fullscreenLoading" :title="upload.title" v-model="upload.open" width="400px"
			append-to-body>
			<el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
				:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
				:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
				<el-icon class="el-icon--upload">
					<upload-filled />
				</el-icon>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<template #tip>
					<div class="el-upload__tip text-center">
						<div class="el-upload__tip">
							<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的卷宗管理
						</div>
						<span>仅允许导入xls、xlsx格式文件。</span>
						<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
							@click="importTemplate">下载模板</el-link>
					</div>
				</template>
			</el-upload>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitFileForm">确 定</el-button>
					<el-button @click="upload.open = false">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="Dossier">
import {
	getToken
} from "@/utils/auth";
import {
	listDossier,
	getDossier,
	delDossier,
	addDossier,
	updateDossier
} from "@/api/base/dossier";

import {
	treeselect
} from "@/api/base/catalog";

const {
	proxy
} = getCurrentInstance();
const {
	secret_level,
	is_delflag
} = proxy.useDict('secret_level', 'is_delflag');

const dossierList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const catalogOptions = ref(undefined);
const familyOptions = ref([]);
const fullscreenLoading = ref(false)
/*** 卷宗导入参数 */
const upload = reactive({
	// 是否显示弹出层（卷宗导入）
	open: false,
	// 弹出层标题（卷宗导入）
	title: "",
	// 是否禁用上传
	isUploading: false,
	// 是否更新已经存在的用户数据
	updateSupport: 0,
	// 设置上传的请求头部
	headers: {
		Authorization: "Bearer " + getToken()
	},
	// 上传的地址
	url: import.meta.env.VITE_APP_BASE_API + "/base/dossier/importData"
});

const data = reactive({
	form: {},
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		dossierCode: null,
		dossierName: null,
		dossierNumber: null,
		saveYear: null,
		year: null,
		dossierNo: null,
		fileNumDossier: null,
		pageNumDossier: null,
		startDate: null,
		endDate: null,
	},
	rules: {
		catalogId: [{
			required: true,
			message: "分类id不能为空",
			trigger: "blur"
		}],
		familyId: [{
			required: true,
			message: "全宗号不能为空",
			trigger: "blur"
		}],
		dossierCode: [{
			required: true,
			message: "卷宗号不能为空",
			trigger: "blur"
		}],
		dossierName: [{
			required: true,
			message: "题名不能为空",
			trigger: "blur"
		}],
		dossierNumber: [{
			required: true,
			message: "案卷档号不能为空",
			trigger: "blur"
		}],
		saveYear: [{
			required: true,
			message: "保管年限不能为空",
			trigger: "blur"
		}],
		secretLevel: [{
			required: true,
			message: "密級不能为空",
			trigger: "change"
		}],
	}
});

const {
	queryParams,
	form,
	rules
} = toRefs(data);

/** 查询卷宗管理列表 */
function getList() {
	loading.value = true;
	listDossier(queryParams.value).then(response => {
		dossierList.value = response.rows;
		total.value = response.total;
		loading.value = false;
	});
}

/** 查询分类下拉树结构 */
function getTreeselect() {
	treeselect().then(response => {
		catalogOptions.value = response.data;
	});
	console.log(catalogOptions);
};


/** 初始化分类数据 */
function initTreeData() {
	// 判断目分类的数据是否存在，存在不获取，不存在则获取
	if (catalogOptions.value === undefined) {
		treeselect().then(response => {
			catalogOptions.value = response.data;
		});
	}
};
// 取消按钮
function cancel() {
	open.value = false;
	reset();
}

// 表单重置
function reset() {
	form.value = {
		dossierId: null,
		catalogId: null,
		familyId: null,
		dossierCode: null,
		dossierName: null,
		dossierNumber: null,
		saveYear: null,
		secretLevel: null,
		duty: null,
		updateTime: null,
		matter: null,
		delflag: null
	};
	proxy.resetForm("dossierRef");
}

/** 搜索按钮操作 */
function handleQuery() {
	queryParams.value.pageNum = 1;
	getList();
}

/** 重置按钮操作 */
function resetQuery() {
	proxy.resetForm("queryRef");
	handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
	ids.value = selection.map(item => item.dossierId);
	single.value = selection.length != 1;
	multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
	reset();
	initTreeData();

	getDossier().then(response => {
		familyOptions.value = response.familys;
		open.value = true;
		title.value = "添加卷宗管理";
	});
}

/** 修改按钮操作 */
function handleUpdate(row) {
	reset();
	initTreeData();
	const dossierId = row.dossierId || ids.value
	getDossier(dossierId).then(response => {
		familyOptions.value = response.familys;
		form.value = response.data;
		open.value = true;
		title.value = "修改卷宗管理";
	});
}

/** 提交按钮 */
function submitForm() {
	proxy.$refs["dossierRef"].validate(valid => {
		if (valid) {
			if (form.value.dossierId != null) {
				updateDossier(form.value).then(response => {
					proxy.$modal.msgSuccess("修改成功");
					open.value = false;
					getList();
				});
			} else {
				addDossier(form.value).then(response => {
					proxy.$modal.msgSuccess("新增成功");
					open.value = false;
					getList();
				});
			} 1
		}
	});
}

/** 删除按钮操作 */
function handleDelete(row) {
	const dossierIds = row.dossierId || ids.value;
	proxy.$modal.confirm('是否确认删除卷宗管理编号为"' + dossierIds + '"的数据项？').then(function () {
		return delDossier(dossierIds);
	}).then(() => {
		getList();
		proxy.$modal.msgSuccess("删除成功");
	}).catch(() => { });
}

/** 导出按钮操作 */
function handleExport() {
	proxy.download('base/dossier/export', {
		...queryParams.value
	}, `dossier_${new Date().getTime()}.xlsx`)
}

/** 导入按钮操作 */
function handleImport() {
	upload.title = "卷宗导入";
	upload.open = true;
};

/** 下载模板操作 */
function importTemplate() {
	proxy.download("base/dossier/importTemplate", {}, `卷宗管理导入模板.xlsx`);
};
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
	upload.isUploading = true;
	fullscreenLoading.value = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
	upload.open = false;
	upload.isUploading = false;
	proxy.$refs["uploadRef"].handleRemove(file);
	fullscreenLoading.value = false;
	proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg +
		"</div>", "导入结果", {
		dangerouslyUseHTMLString: true
	});
	getList();
};
/** 提交上传文件 */
function submitFileForm() {
	proxy.$refs["uploadRef"].submit();
};

getTreeselect();
getList();
</script>
